<template>
  <div class="title">欢迎来到news组件</div>
  
  <div class="container">
  <div class="top">
    <button @click="getSentence">点我领取一句《我再人间凑日子语句》</button>
  <br>
  <div>
    <ul>
      <li v-for="(sen,index) in senList" :key="index">{{ sen }}</li>
    </ul>
  </div>
  
   <!-- 跳转页面 -->
  <div>
<ul>
  <li v-for="news in newList" :key="news.id">
    <!-- 向展示组件中传入params参数：第一种写法 -->
    <!-- <RouterLink :to="`/news/newsson/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
    
    <!-- 向展示组件中传入params参数：第二种写法 -->
     <RouterLink :to="{
      name:'newsson',
      query:{
        id:news.id,
        title:news.title,
        content:news.content
      }
     }">{{ news.title }}</RouterLink>
  </li>
</ul>
  </div>
  
  </div>
  <div class="bottom">
    <RouterView></RouterView>
  </div>
  </div>
</template>

<script lang="ts" setup name="news">
import axios from 'axios';
import { reactive } from 'vue';
import { RouterView,RouterLink } from 'vue-router';
// 变量
let newList=[
  {id:"001",title:"周一",content:"希望没有早八"},
  {id:"002",title:"周二",content:"希望可少一点"},
  {id:"003",title:"周三",content:"希望只有一节课"},
  {id:"004",title:"周四",content:"希望没有体育课"}
]
let senList=reactive([
  "雨骤，打不湿鸭子的翅膀；狂风，吹不灭萤火的灯光。 ——选自散文集《我在人间凑数的日子》"
])
// 方法
async function getSentence(){
  let res=await axios.get("https://v2.xxapi.cn/api/renjian")
  console.log(res.data.data);
  senList.push(res.data.data)
}
</script>

<style>
.title{
  text-align: center;
  color: orange;
}
.container{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom{
  height: 500px;
  min-width: 500px;
  border: 2px orchid solid;
}
</style>